<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta th:name="_csrf" th:content="${_csrf.token}"/>
    <!-- 默认的header name是X-CSRF-TOKEN -->
    <meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title>cloud-mall用户登录</title>
<!--    jquery-->
    <script th:src="@{/static/assets/js/jquery.min.js}"></script>
    <!-- 样 式 文 件 -->
    <link rel="stylesheet" th:href="@{/static/component/pear/css/pear.css}" />
    <link rel="stylesheet" th:href="@{/static/pear-admin/css/other/login.css}" />

</head>
<!-- 代 码 结 构 -->
<body background="/static/pear-admin/images/background.svg" style="background-size: cover;">
<form id="fm" class="layui-form" th:action="@{/web/login/login}" autocomplete="off" method="post">
    <div class="layui-form-item">
        <img class="logo" th:src="@{/static/pear-admin/images/logo2.png}" />
        <div class="title">cloud mall</div>
    </div>
    <div class="layui-form-item">
        <input name="username" id="username" placeholder="帐号" lay-verify="required" hover class="layui-input"  />
    </div>
    <div class="layui-form-item">
        <input name="password" id="password" placeholder="密码" type="password" lay-verify="required" hover class="layui-input"  />
    </div>
    <div class="layui-form-item">
        <input name="captcha" id="captcha" placeholder="验证码"  hover  lay-verify="required" class="code layui-input layui-input-inline"  />
        <img id="cap" onclick="refreshCaptcha()" th:src="@{/web/pear/captcha}" class="codeImage" />
    </div>
    <div class="layui-form-item">
        <input id="remember" type="checkbox" name="remember-me" title="记住密码" lay-skin="primary">
    </div>
    <div class="layui-form-item">
        <button type="button" lay-submit lay-filter="login" class="pear-btn pear-btn-success login">
            登 录
        </button>
    </div>

    <div class="layui-form-item" style="text-align:center;color: DarkGray;">
        <span>其他方式登录</span>

    </div>
    <div class="layui-form-item" style="text-align:center;">
        <a href="https://github.com/login/oauth/authorize?client_id=81dc9f8914b6531f002e&redirect_uri=http://localhost/github/callback&state=test&scope=user">
            <img style="width: 23.7px;height: 23.7px;" th:src="@{/static/user/img/auth/github.png}">
        </a> 
        <a href="https://gitee.com/oauth/authorize?client_id=eaa907dda6e1cceef6bcf70e2680bbf059e4464fb52e03223eaffab30d82a0f9&redirect_uri=http://localhost/gitee/callback&response_type=code">
            <img style="width: 23.7px;height: 23.7px;" th:src="@{/static/user/img/auth/gitee.png}">
        </a> 
    </div>
</form>
<!-- 资 源 引 入 -->
<script th:src="@{/static/component/layui/layui.js}"></script>
<script th:src="@{/static/component/pear/pear.js}"></script>
<script>
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    var headers = {"X-CSRF-TOKEN": token}
    //刷新验证码
    function refreshCaptcha() {
        document.getElementById('cap').src = '/web/pear/captcha?r=' + Math.random();
    }

    layui.use('form', function(){
        var form = layui.form;
        form.on('submit(login)', function(data){
            var data = new FormData();
            data.append('captcha',$('#captcha').val());
            data.append('username',$('#username').val());
            data.append('password',$('#password').val());
            data.append('remember',$("input[type='checkbox']").is(':checked'));
            $.ajax({
                url: "/web/login/login",
                data: data,  //ajax提交表单
                dataType: 'json',
                type: 'POST',
                headers: headers,
                async:false,
                processData: false,
                contentType: false,
                //请求的页面响应成功，则进行处理：
                success:function(result){
                    if (result.success) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1500
                        });
                        setTimeout(function()
                        {
                            window.location.href='/web/index/'
                        }
                        ,1700);

                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1700
                        });
                        //刷新验证码
                        document.getElementById('cap').src = '/web/pear/captcha?r=' + Math.random();
                    }
                },
                error: function(e) {
                    layer.msg("验证码错误", {
                        icon: 2,
                        time: 1000
                    });
                    //刷新验证码
                    document.getElementById('cap').src = '/web/pear/captcha?r=' + Math.random();
                }

            })
        });





        //回车事件
        document.onkeydown = function (event) {
            var e = event || window.event;
            if (e && e.keyCode == 13) { //回车键的键值为13

                var data = new FormData();
                data.append('captcha',$('#captcha').val());
                data.append('username',$('#username').val());
                data.append('password',$('#password').val());
                data.append('remember',$("input[type='checkbox']").is(':checked'));
                $.ajax({
                    url: "/web/login/login",
                    data: data,  //ajax提交表单
                    dataType: 'json',
                    type: 'POST',
                    headers: headers,
                    async:false,
                    processData: false,
                    contentType: false,
                    //请求的页面响应成功，则进行处理：
                    success:function(result){
                        if (result.success) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1500
                            });
                            setTimeout(function()
                                {
                                    window.location.href='/web/index/'
                                }
                                ,1700);

                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1700
                            });
                            //刷新验证码
                            document.getElementById('cap').src = '/web/pear/captcha?r=' + Math.random();
                        }
                    },
                    error: function(e) {
                        layer.msg("验证码错误", {
                            icon: 2,
                            time: 1000
                        });
                        //刷新验证码
                        document.getElementById('cap').src = '/web/pear/captcha?r=' + Math.random();
                    }

                })

            }
        };






    });


</script>
</body>
</html>
